<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>萝卜丝 - 智能客服</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.kefux.com/assets/css/vendor/elementui/2.15.9/theme-chalk/index.css">
    <style>
        .param {
            color: gray; 
            font-style: italic; 
            font-size: 10px;
        }
    </style>
</head>

<body style="margin-left: 0px;">

    <div id="app">
        <h1 style="text-align: center;"><a href="https://www.kefux.com" target="_blank">萝卜丝智能客服</a></h1>
        <h4 style="text-align: center;">让获客更简单</h4>
        <h5 style="text-align: center; color: gray;">此界面内容尚处于内测阶段</h5>
        <el-form ref="iconForm" label-width="280px">
            <el-form-item label="对话类型">
                <el-radio-group v-model="type" @change="reinit">
                    <el-radio label="workGroup">技能组对话</el-radio>
                    <el-radio label="appointed">指定一对一对话</el-radio>
                </el-radio-group>
                <span class="param">参数：type，值：workGroup, appointed</span>
            </el-form-item>
            <el-form-item label="技能组" v-if="type === 'workGroup'">
                <el-radio-group v-model="workGroupWid" @change="onWorkGroupChange">
                    <el-radio v-for="workGroup in workGroups" :label="workGroup.wid">{{ workGroup.nickname }}</el-radio>
                </el-radio-group>
                <span class="param">参数：wid/workGroupWid</span>
            </el-form-item>
            <el-form-item label="指定客服" v-if="type === 'appointed'">
                <el-radio-group v-model="agentUid" @change="reinit">
                    <el-radio v-for="agent in agents" :label="agent.uid">{{ agent.nickname }}</el-radio>
                </el-radio-group>
                <span class="param">参数：aid/agentUid</span>
            </el-form-item>
            <el-form-item label="漂浮框形状">
                <el-radio-group v-model="shape" @change="reinit">
                    <el-radio label="round">圆形</el-radio>
                    <el-radio label="rectangle">长方形</el-radio>
                </el-radio-group>
                <span class="param">参数：shape</span>
            </el-form-item>
            <el-form-item label="语言">
                <el-radio-group v-model="lang" @change="reinit">
                    <el-radio label="cn">汉语</el-radio>
                    <el-radio label="en">English</el-radio>
                </el-radio-group>
                <span class="param">参数：lang</span>
            </el-form-item>
            <!-- TODO: 替换icon，提供几个可选项 -->
            <el-form-item label="漂浮框按钮文字" v-if="shape === 'rectangle'">
                <el-input v-model="buttonText" placeholder="请输入内容" style="width: 220px;"></el-input>
                <el-button size="medium" round @click="reinit">更新</el-button>
                <span class="param">参数：buttonText</span>
            </el-form-item>
            <el-form-item label="漂浮框文字颜色" v-if="shape === 'rectangle'">
                <el-color-picker v-model="buttonColor" @change="reinit"></el-color-picker>
                <span class="param">参数：buttonColor</span>
            </el-form-item>
            <el-form-item label="漂浮框背景颜色">
                <el-color-picker v-model="buttonBackground" @change="reinit"></el-color-picker>
                <span class="param">参数：buttonBackground</span>
            </el-form-item>
            <el-form-item label="对话框标题文字颜色">
                <el-color-picker v-model="bannerColor" @change="reinit"></el-color-picker>
                <span class="param">参数：bannerColor</span>
            </el-form-item>
            <el-form-item label="对话框标题背景颜色">
                <el-color-picker v-model="bannerBackground" @change="reinit"></el-color-picker>
                <span class="param">参数：bannerBackground</span>
            </el-form-item>
            <!-- <el-form-item label="漂浮框边框" v-if="shape === 'rectangle'">
                <el-radio-group v-model="border" @change="reinit">
                    <el-radio label="border">有</el-radio>
                    <el-radio label="none">无</el-radio>
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="漂浮框位置">
                <el-radio-group v-model="position" @change="reinit">
                    <el-radio label="right">右边</el-radio>
                    <el-radio label="left">左边</el-radio>
                    <!-- <el-radio label="middle">居中</el-radio> -->
                </el-radio-group>
                <span class="param">参数：position</span>
            </el-form-item>
            <!-- <el-input v-model="rightMargin" placeholder="" style="width: 150px;" @change="reinit" disabled></el-input> -->
            <!-- <el-button size="medium" round @click="reinit" disabled>更新</el-button> -->
            <el-form-item label="漂浮框右边距离" v-if="position === 'right'">
                <el-radio-group v-model="rightMargin" @change="reinit">
                    <el-radio label="10">10px</el-radio>
                    <el-radio label="15">15px</el-radio>
                    <el-radio label="20">20px</el-radio>
                    <el-radio label="25">25px</el-radio>
                    <el-radio label="30">30px</el-radio>
                    <el-radio label="40">40px</el-radio>
                    <el-radio label="50">50px</el-radio>
                    <el-radio label="60">60px</el-radio>
                    <el-radio label="70">70px</el-radio>
                    <el-radio label="80">80px</el-radio>
                    <!-- <el-radio label="90">90px</el-radio> -->
                    <!-- <el-radio label="100">100px</el-radio> -->
                </el-radio-group>
                <span class="param">参数：rightMargin</span>
            </el-form-item>
            <el-form-item label="漂浮框左边距离" v-if="position === 'left'">
                <el-radio-group v-model="leftMargin" @change="reinit">
                    <el-radio label="10">10px</el-radio>
                    <el-radio label="15">15px</el-radio>
                    <el-radio label="20">20px</el-radio>
                    <el-radio label="25">25px</el-radio>
                    <el-radio label="30">30px</el-radio>
                    <el-radio label="40">40px</el-radio>
                    <el-radio label="50">50px</el-radio>
                    <el-radio label="60">60px</el-radio>
                    <el-radio label="70">70px</el-radio>
                    <el-radio label="80">80px</el-radio>
                    <!-- <el-radio label="90">90px</el-radio> -->
                    <!-- <el-radio label="100">100px</el-radio> -->
                </el-radio-group>
                <span class="param">参数：leftMargin</span>
            </el-form-item>
            <el-form-item label="漂浮框下边距离">
                <el-radio-group v-model="bottomMargin" @change="reinit">
                    <el-radio label="10">10px</el-radio>
                    <el-radio label="15">15px</el-radio>
                    <el-radio label="20">20px</el-radio>
                    <el-radio label="25">25px</el-radio>
                    <el-radio label="30">30px</el-radio>
                    <el-radio label="40">40px</el-radio>
                    <el-radio label="50">50px</el-radio>
                    <el-radio label="60">60px</el-radio>
                    <el-radio label="70">70px</el-radio>
                    <el-radio label="80">80px</el-radio>
                    <!-- <el-radio label="90">90px</el-radio> -->
                    <!-- <el-radio label="100">100px</el-radio> -->
                </el-radio-group>
                <span class="param">参数：bottomMargin</span>
            </el-form-item>
            <el-form-item label="对话框位置">
                <el-radio-group v-model="positionWindow" @change="reinit">
                    <el-radio label="right">右边</el-radio>
                    <el-radio label="left">左边</el-radio>
                    <el-radio label="middle">居中</el-radio>
                </el-radio-group>
                <span class="param">参数：positionWindow</span>
            </el-form-item>
            <el-form-item label="对话窗口宽度">
                <el-radio-group v-model="column" @change="reinit">
                    <el-radio label="one">一列</el-radio>
                    <el-radio label="two">两列</el-radio>
                </el-radio-group>
                <span class="param">参数：column</span>
            </el-form-item>
            <!-- <el-form-item label="右侧列显示内容" v-if="isDebug && (column === 'two')">
                <el-radio-group v-model="columnTwoType" @change="reinit">
                    <el-radio label="faq">常见问题</el-radio>
                    <el-radio label="contact">客服名片</el-radio>
                    <el-radio label="selfdefine">自定义内容</el-radio>
                </el-radio-group>
                <span class="param">参数：columnTwoType</span>
            </el-form-item> -->
            <el-form-item label="历史记录">
                <el-radio-group v-model="history" @change="reinit">
                    <el-radio label="0">不显示</el-radio>
                    <el-radio label="1">显示</el-radio>
                </el-radio-group>
                <span class="param">参数：history</span>
            </el-form-item>
            <el-form-item label="机器人问题优先显示分类">
                <el-radio-group v-model="v2robot" @change="reinit">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                </el-radio-group>
                <span class="param">参数：v2robot</span>
            </el-form-item>
            <!-- 自定义用户名、昵称、头像, TODO: 待补充说明 -->
            <el-form-item label="自定义用户名">
                <el-checkbox v-model="selfDefine" @change="reinit">自定义用户名、昵称、头像</el-checkbox>
            </el-form-item>
            <el-form-item label="测试用户" v-if="selfDefine">
                <el-radio-group v-model="userSwitch" @change="switchTestUser">
                    <el-radio label="boy">测试用户1男</el-radio>
                    <el-radio label="girl">测试用户2女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="用户名" v-if="selfDefine">
                <el-input v-model="username" placeholder="请输入用户名" style="width: 220px;"></el-input>
                <span class="param">参数：username</span>
            </el-form-item>
            <el-form-item label="昵称" v-if="selfDefine">
                <el-input v-model="nickname" placeholder="请输入昵称" style="width: 220px;"></el-input>
                <span class="param">参数：nickname</span>
            </el-form-item>
            <el-form-item label="头像" v-if="selfDefine">
                <el-input v-model="avatar" placeholder="请输入头像网址" style="width: 220px;"></el-input>
                <span class="param">参数：avatar</span>
                <el-image :src="avatar" :preview-src-list="[avatar]" style="width: 40px; height: 40px;" />
            </el-form-item>
            <!-- 商品参数  TODO: 待补充说明-->
            <el-form-item label="商品参数">
                <el-checkbox v-model="showGoods" @change="reinit">商品参数</el-checkbox>
            </el-form-item>
            <el-form-item label="商品id" v-if="showGoods">
                <el-input v-model="goods_id" placeholder="请输入商品id" style="width: 220px;"></el-input>
                <span class="param">参数：goods_id</span>
            </el-form-item>
            <el-form-item label="商品标题" v-if="showGoods">
                <el-input v-model="goods_title" placeholder="请输入商品标题" style="width: 220px;"></el-input>
                <span class="param">参数：goods_title</span>
            </el-form-item>
            <el-form-item label="商品简介" v-if="showGoods">
                <el-input v-model="goods_content" placeholder="请输入商品简介" style="width: 220px;"></el-input>
                <span class="param">参数：goods_content</span>
            </el-form-item>
            <el-form-item label="商品价格" v-if="showGoods">
                <el-input v-model="goods_price" placeholder="请输入商品价格" style="width: 220px;"></el-input>
                <span class="param">参数：goods_price</span>
            </el-form-item>
            <el-form-item label="商品网址" v-if="showGoods">
                <el-input v-model="goods_url" placeholder="请输入商品网址" style="width: 220px;"></el-input>
                <span class="param">参数：goods_url</span>
            </el-form-item>
            <el-form-item label="商品图片" v-if="showGoods">
                <el-input v-model="goods_imageUrl" placeholder="请输入商品图片" style="width: 220px;"></el-input>
                <span class="param">参数：goods_imageUrl</span>
                <el-image :src="goods_imageUrl" :preview-src-list="[goods_imageUrl]" style="width: 40px; height: 40px;" />
            </el-form-item>
            <el-form-item label="商品类别代码(可选)" v-if="showGoods">
                <el-input v-model="goods_categoryCode" placeholder="请输入商品类别代码" style="width: 220px;"></el-input>
                <span class="param">参数：goods_goods_categoryCode</span>
            </el-form-item>
            <!-- 弹窗  TODO: 待补充说明-->
            <!-- <el-form-item label="自动弹窗">
                <el-checkbox v-model="autoPop" @change="reinit">自动弹窗</el-checkbox>
                <span class="param">参数：autoPop</span>
            </el-form-item> -->
            <!-- <el-form-item label="对话窗口导航文字颜色(暂未启用)">
                <el-color-picker v-model="buttonBackground" disabled></el-color-picker>
            </el-form-item> -->
            <!-- <el-form-item label="对话窗口导航背景颜色(暂未启用)">
                <el-color-picker v-model="buttonBackground" disabled></el-color-picker>
            </el-form-item> -->
            <el-form-item label="附言">
                <el-checkbox v-model="showPostscript" @change="reinit">附言</el-checkbox>
            </el-form-item>
            <el-form-item label="附言内容" v-if="showPostscript">
                <el-input type="textarea" placeholder="请输入附言内容" v-model="postscript" style="width: 600px;" @change="reinit"></el-input><br />
            </el-form-item>
            <el-form-item label="嵌入式窗口客服代码">
                <el-input type="textarea" :autosize="{ minRows: 15, maxRows: 30}" placeholder="请输入内容" v-model="embedCode"
                    style="width: 600px;"></el-input>
                <p>复制客服代码，放到自己网页的&lt;/body&gt;标签前面</p>
                <el-button class="copyEmbedBtn" size="medium" round :data-clipboard-text="embedCode" @click="handleOnCodeEmbedCopy">
                    复制客服代码</el-button>
                <br /><br />
                <el-input type="textarea" placeholder="请输入内容" v-model="embedOpen" style="width: 600px;"></el-input><br />
                <span>打开聊天窗口代码</span><br />
                <el-button size="medium" round @click="openWindowEmbed">打开聊天窗口</el-button>
                <br /><br />
                <el-input type="textarea" placeholder="请输入内容" v-model="hideIconCode" style="width: 600px;"></el-input><br />
                <span>隐藏漂浮框代码</span><br />
                <el-button size="medium" round @click="hideIcon">隐藏漂浮框</el-button>
                <br /><br />
                <el-input type="textarea" placeholder="请输入内容" v-model="showIconCode" style="width: 600px;"></el-input><br />
                <span>显示漂浮框代码</span><br />
                <el-button size="medium" round @click="showIcon">显示漂浮框</el-button>
            </el-form-item>
            <el-form-item label="PC大窗口客服代码">
                <el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="bigWinCode">
                </el-input><br/>
                <el-button class="copyBigBtn" size="medium" round :data-clipboard-text="bigWinCode" @click="handleOnCodeBigCopy">复制客服代码</el-button>
                <el-button size="medium" round @click="openWindowBig">预览1</el-button>
                <el-button size="medium" round @click="openWindowBig2">预览2</el-button>
            </el-form-item>
            <el-form-item label="PC小窗口客服代码">
                <el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="smallWinCode">
                </el-input><br />
                <el-button class="copySmallBtn" size="medium" round :data-clipboard-text="smallWinCode" @click="handleOnCodeSmallCopy">复制客服代码</el-button>
                <el-button size="medium" round @click="openWindowSmall">预览1</el-button>
                <el-button size="medium" round @click="openWindowSmall2">预览2</el-button>
            </el-form-item>
            <el-form-item label="H5客服代码">
                <el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="h5Code">
                </el-input><br />
                <el-button class="copyH5Btn" size="medium" round :data-clipboard-text="h5Code" @click="handleOnCodeH5Copy">复制客服代码</el-button>
                <el-button size="medium" round @click="openH5">预览1</el-button>
                <el-button size="medium" round @click="openH52">预览2</el-button>
            </el-form-item>
            <el-form-item label="视频客服代码">
                <el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="h5VideoCode">
                </el-input><br />
                <el-button class="copyH5VideoBtn" size="medium" round :data-clipboard-text="h5VideoCode" @click="handleOnCodeH5VideoCopy">复制客服代码
                </el-button>
                <el-button size="medium" round @click="openH5Video">预览1</el-button>
                <el-button size="medium" round @click="openH5Video2">预览2</el-button>
            </el-form-item>
            <el-form-item label="H5短连接">
                <el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="shortCode">
                </el-input><br />
                <el-button size="medium" round @click="refreshShort">刷新</el-button>
                <el-button class="copyShortBtn" size="medium" round :data-clipboard-text="shortCode" @click="handleOnCodeShortCopy">复制客服代码
                </el-button>
                <el-button size="medium" round @click="openShort">预览1</el-button>
                <el-button size="medium" round @click="openShort2">预览2</el-button>
            </el-form-item>
            <el-form-item label="二维码">
                <div id="short_qrcode"></div>
                <el-button size="medium" round @click="refreshQrcode">刷新</el-button>
            </el-form-item>
        </el-form>

        <!-- <div>形状</div> -->
        <!-- <div>文字/图标</div> -->
        <!-- <div>大小</div> -->
        <!-- <div>位置</div> -->
        <!-- <div>favicon</div> -->
        <!-- <div>对话窗口打开后, 是否隐藏</div> -->
        <!-- <div>提示性气泡</div> -->
        <!-- <div>支持国际化</div> -->

        <!-- <br> -->
        <!-- <div>颜色</div> -->
        <!-- <div>点击icon, 显示动作</div> -->
        <!-- <div>宽、高</div> -->
        <!-- <div>气泡颜色</div> -->
        <!-- <div>支持国际化</div> -->
    </div>

    <!--萝卜丝·智能客服代码 开始 -->
    <script src="js/custom.js?v=230515"></script>
    <!-- <script src="./js/custom.min.js?v=230515"></script> -->
    <!--./萝卜丝·智能客服代码 结束 -->

    <script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/vue/2.5.16/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/clipboard/2.0.10/clipboard.min.js"></script>
    <script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/elementui/2.15.9/index.js"></script>
    <script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/qrcode/qrcode.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // fullscreenLoading: false,
                // byteDesk 属性
                // style: 1, // 三个值可选：1,2,3
                // border: 'none', // 'border' 或 'none'
                shape: 'round', // 'round' 或 'rectangle'
                //
                position: 'right', // 'left' 或 'right'
                rightMargin: '50',
                leftMargin: '50',
                bottomMargin: '50',
                // 对话窗口位置
                positionWindow: 'right', // 'left' 或 'right' / 'middle'
                // 列
                column: 'one',
                // 显示两列时，右侧显示类型：常见问题、描述简介、商品、名片
                columnTwoType: 'faq', // faq、description、commodity、card
                history: '0',
                // 对话窗口
                bannerColor: '#ffffff',
                bannerBackground: '#007bff',
                // icon
                buttonColor: '#ffffff',
                buttonBackground: '#007bff',
                buttonText: '在线客服',
                // 
                // 客服参数
                adminUid: '', // 201808221551193
                subDomain: '', // vip
                type: 'workGroup', // workGroup/appointed
                workGroupWid: '', // 201807171659201
                agentUid: '',
                // 自定义用户名、昵称、头像
                selfDefine: false,
                userSwitch: "boy",
                username: 'mywebuserboy', // 自定义用户名
                nickname: '我是帅哥web', // 自定义昵称
                avatar: 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/boy.png', // 自定义头像
                // 商品参数
                showGoods: false,
                // goods: "0", // goods 是否显示商品信息，如果要显示，设置为goods=1，设置为其他值，则不显示商品信息
                goods_id: "1", // goods_id 商品信息id，参数goods=1的情况有效
                goods_title: "商品标题", // goods_title 商品信息标题，参数goods=1的情况有效
                goods_content: "商品详情", // goods_content 商品信息详情，参数goods=1的情况有效
                goods_price: "1000", // goods_price 商品信息价格，参数goods=1的情况有效
                goods_url: "https://item.m.jd.com/product/12172344.html", // goods_url 商品信息网址，参数goods=1的情况有效
                goods_imageUrl: "https://bytedesk.oss-cn-shenzhen.aliyuncs.com/images2/20230301074832", // goods_imageUrl 商品图片，参数goods=1的情况有效
                goods_categoryCode: "123", // goods_categoryCode 可选，商品信息类别，参数goods=1的情况有效
                // 自动弹窗，请求后台弹窗目前有点问题，暂时使用前端弹窗设置
                autoPop: false,
                // 机器人优先显示分类："1", 优先显示问题: "0"
                v2robot: "0",
                // 语言
                lang: 'cn',
                // 附言
                showPostscript: false,
                postscript: '',
                // 
                shortCode: '',
                //
                agents: [],
                workGroups: [],
                // 本地测试环境
                isDebug: true,
                baseUrl: 'http://127.0.0.1:8000',
                chatUrl: 'http://127.0.0.1:8887'
                // 线上环境
                // isDebug: false,
                // baseUrl: 'https://api.bytedesk.com',
                // chatUrl: 'https://chat.kefubaobao.com'
            },
            computed: {
                bigWinCode() {
                    let index = 'index'
                    if (this.lang === 'en') {
                        index = 'indexen'
                    }
                    return this.chatUrl + '/chat/pc/' + index + '.html?sub=' + this.subDomain + 
                        '&uid=' + this.adminUid + 
                        '&wid=' + this.workGroupWid + 
                        '&type=' + this.type + 
                        '&aid=' + this.agentUid + 
                        '&history=' + this.history + 
                        '&lang=' + this.lang + 
                        '&color=' + encodeURIComponent(this.buttonColor) + 
                        '&background=' + encodeURIComponent(this.buttonBackground) + 
                        '&column=' + (this.column === 'two' ? '2' : '1') + 
                        '&v2robot=' + this.v2robot +
                        (this.selfDefine ?
                            ('&selfuser=1' + 
                            '&username=' + encodeURIComponent(this.username) +
                            '&nickname=' + encodeURIComponent(this.nickname) +
                            '&avatar=' + encodeURIComponent(this.avatar))
                            : '') +
                        (this.showGoods ? 
                            ('&goods=1' +
                            '&goods_id=' + encodeURIComponent(this.goods_id) +
                            '&goods_title=' + encodeURIComponent(this.goods_title) + 
                            '&goods_content=' + encodeURIComponent(this.goods_content) +
                            '&goods_price=' + encodeURIComponent(this.goods_price) + 
                            '&goods_url=' + encodeURIComponent(this.goods_url) + 
                            '&goods_imageUrl=' + encodeURIComponent(this.goods_imageUrl) + 
                            '&goods_categoryCode=' + this.goods_categoryCode)
                            : '') +
                        (this.showPostscript ? '&postscript=' + encodeURIComponent(this.postscript) : '') +
                        '&p'
                },
                smallWinCode() {
                    return this.chatUrl + '/chat/pc/iframe.html?sub=' + this.subDomain + 
                        '&uid=' + this.adminUid + 
                        '&wid=' + this.workGroupWid + 
                        '&type=' + this.type + 
                        '&aid=' + this.agentUid + 
                        '&history=' + this.history + 
                        '&lang=' + this.lang + 
                        '&color=' + encodeURIComponent(this.buttonColor) + 
                        '&background=' + encodeURIComponent(this.buttonBackground) + 
                        '&column=' + (this.column === 'two' ? '2' : '1') + 
                        '&v2robot=' + this.v2robot +
                        (this.selfDefine ? 
                            ('&selfuser=1' + 
                            '&username=' + encodeURIComponent(this.username) +
                            '&nickname=' + encodeURIComponent(this.nickname) +
                            '&avatar=' + encodeURIComponent(this.avatar))
                            : '' ) +
                        (this.showGoods ?
                            ('&goods=1' +
                            '&goods_id=' + encodeURIComponent(this.goods_id) +
                            '&goods_title=' + encodeURIComponent(this.goods_title) +
                            '&goods_content=' + encodeURIComponent(this.goods_content) +
                            '&goods_price=' + encodeURIComponent(this.goods_price) +
                            '&goods_url=' + encodeURIComponent(this.goods_url) +
                            '&goods_imageUrl=' + encodeURIComponent(this.goods_imageUrl) + 
                            '&goods_categoryCode=' + this.goods_categoryCode)
                            : '') +
                        (this.showPostscript ? '&postscript=' + encodeURIComponent(this.postscript) : '') +
                        '&p'
                },
                h5Code() {
                    let index = 'index'
                    if (this.lang === 'en') {
                        index = 'indexen'
                    }
                    return this.chatUrl + '/chat/h5/' + index + '.html?sub=' + this.subDomain + 
                        // '&uid=' + this.adminUid + 
                        '&wid=' + this.workGroupWid + 
                        '&type=' + this.type + 
                        '&aid=' + this.agentUid + 
                        '&history=' + this.history + 
                        '&lang=' + this.lang + 
                        '&v2robot=' + this.v2robot +
                        (this.selfDefine ?
                            ('&selfuser=1' + 
                            '&username=' + encodeURIComponent(this.username) +
                            '&nickname=' + encodeURIComponent(this.nickname) +
                            '&avatar=' + encodeURIComponent(this.avatar))
                            : '') +
                        (this.showGoods ?
                            ('&goods=1' +
                            '&goods_id=' + encodeURIComponent(this.goods_id) +
                            '&goods_title=' + encodeURIComponent(this.goods_title) +
                            '&goods_content=' + encodeURIComponent(this.goods_content) +
                            '&goods_price=' + encodeURIComponent(this.goods_price) +
                            '&goods_url=' + encodeURIComponent(this.goods_url) +
                            '&goods_imageUrl=' + encodeURIComponent(this.goods_imageUrl) + 
                            '&goods_categoryCode=' + this.goods_categoryCode)
                            : '') +
                        (this.showPostscript ? '&postscript=' + encodeURIComponent(this.postscript) : '') +
                        '&p'
                },
                h5VideoCode() {
                    return this.chatUrl + '/chat/h5/video.html?sub=' + this.subDomain +
                        // '&uid=' + this.adminUid +
                        '&wid=' + this.workGroupWid +
                        '&type=' + this.type +
                        '&aid=' + this.agentUid +
                        '&history=' + this.history +
                        '&lang=' + this.lang +
                        '&v2robot=' + this.v2robot +
                        (this.selfDefine ?
                            ('&selfuser=1' +
                                '&username=' + encodeURIComponent(this.username) +
                                '&nickname=' + encodeURIComponent(this.nickname) +
                                '&avatar=' + encodeURIComponent(this.avatar))
                            : '') +
                        (this.showGoods ?
                            ('&goods=1' +
                                '&goods_id=' + encodeURIComponent(this.goods_id) +
                                '&goods_title=' + encodeURIComponent(this.goods_title) +
                                '&goods_content=' + encodeURIComponent(this.goods_content) +
                                '&goods_price=' + encodeURIComponent(this.goods_price) +
                                '&goods_url=' + encodeURIComponent(this.goods_url) +
                                '&goods_imageUrl=' + encodeURIComponent(this.goods_imageUrl) +
                                '&goods_categoryCode=' + this.goods_categoryCode)
                            : '') +
                        (this.showPostscript ? '&postscript=' + encodeURIComponent(this.postscript) : '') +
                        '&p'
                },
                embedCode() {
                    return '<!--萝卜丝·智能客服代码 开始 -->\n' +
                        '<script src="https://cdn.kefux.com/chat/pc/js/custom.min.js?v=20220902"><' + '/script>\n' +
                        '<script>\n' +
                        ' byteDesk.start("' + this.lang + '", {\n' +
                        '   shape: "' + this.shape + '",\n' +
                        '   column: "' + this.column + '",\n' +
                        '   history: "' + this.history + '",\n' +
                        '   autoPop: ' + this.autoPop + ',\n' +
                        '   v2robot: "' + this.v2robot + '",\n' +
                        '   position: "' + this.position + '",\n' +
                        '   margin: "' + (this.position === 'left' ? this.leftMargin : this.rightMargin) + '",\n' +
                        '   bottomMargin: "' + this.bottomMargin + '",\n' +
                        '   positionWindow: "' + this.positionWindow + '",\n' +
                        '   bannerBackground: "' + this.bannerBackground + '",\n' +
                        '   bannerColor: "' + this.bannerColor + '",\n' +
                        '   buttonColor: "' + this.buttonColor + '",\n' +
                        '   buttonBackground: "' + this.buttonBackground + '",\n' +
                        '   buttonText: "' + this.buttonText + '",\n' +
                        // 客服参数
                        '   adminUid: "' + this.adminUid + '",\n' +
                        '   subDomain: "' + this.subDomain + '",\n' +
                        '   type: "' + this.type + '",\n' +
                        '   workGroupWid: "' + this.workGroupWid + '",\n' +
                        '   agentUid: "' + this.agentUid + '",\n' +
                        // 自定义用户名、昵称、头像
                        (this.selfDefine ?
                        ('   selfuser: "1", \n' + 
                         '   username: "' + ( this.selfDefine ? this.username : '') + '",\n' +
                         '   nickname: "' + ( this.selfDefine ? this.nickname : '') + '", \n' +
                         '   avatar: "' + ( this.selfDefine ? this.avatar : '') + '",\n') : "") +
                        (this.showPostscript ? '   postscript: "' + encodeURIComponent(this.postscript) + '",\n' : '') + 
                        // 传递商品参数
                        (this.showGoods ?
                        ('   goods: "1",\n' +
                         '   goods_id: "' + this.goods_id + '",\n' +
                         '   goods_title: "' + this.goods_title + '",\n' +
                         '   goods_content: "' + this.goods_content + '",\n' +
                         '   goods_price: "' + this.goods_price + '",\n' +
                         '   goods_url: "' + this.goods_url + '",\n' +
                         '   goods_imageUrl: "' + this.goods_imageUrl + '",\n' +
                         '   goods_categoryCode: "' + this.goods_categoryCode + '",\n')
                            : '') +
                        '});\n ' +
                        '<' + '/script>\n' +
                        '<!--./萝卜丝·智能客服代码 结束 -->'
                },
                embedOpen() {
                    return 'byteDesk.startWithoutIcon()';
                },
                hideIconCode() {
                    return 'byteDesk.hideIcon()'
                },
                showIconCode() {
                    return 'byteDesk.showIcon()'
                }
            },
            watch: {
                buttonColor(newVal, oldVal) {
                    // console.log(`buttonColor changed: ${newVal}`);
                    // var icon = document.getElementById("byte_desk-start");
                    // icon.style.setProperty('background-color', newVal);
                    this.reinit()
                },
                buttonBackground(newVal, oldVal) {
                    // console.log(`buttonBackground changed: ${newVal}`);
                    // var icon = document.getElementById("byte_desk-start");
                    // icon.style.setProperty('background-color', newVal);
                    this.reinit()
                },
                h5Code(newVal, oldVal) {
                    this.getShortUrl(newVal)
                },
                shortCode(newVal, oldVal) {
                    this.refreshQrcode()
                },
                lang(newVal, oldVal) {
                    // console.log(newVal, oldVal)
                    if (newVal === 'en') {
                        this.buttonText = 'Live Chat'
                    } else {
                        this.buttonText = '在线客服'
                    }
                }
            },
            methods: {

                init() {
                    if (this.agentUid === '' || this.workGroupWid === '') {
                        return
                    }
                    //
                    byteDesk.start(this.lang, {
                        // style: this.style, // 三个值可选：1,2,3
                        // border: this.border,
                        shape: this.shape,
                        column: this.column,
                        history: this.history,
                        autoPop: this.autoPop,
                        v2robot: this.v2robot,
                        position: this.position,
                        margin: (this.position === 'left' ? this.leftMargin : this.rightMargin),
                        bottomMargin: this.bottomMargin,
                        positionWindow: this.positionWindow,
                        bannerBackground: this.bannerBackground,
                        bannerColor: this.bannerColor,
                        buttonColor: this.buttonColor,
                        buttonBackground: this.buttonBackground,
                        buttonText: this.buttonText,
                        // 客服参数
                        adminUid: this.adminUid,
                        subDomain: this.subDomain,
                        type: this.type,
                        workGroupWid: this.workGroupWid,
                        agentUid: this.agentUid,
                        // 自定义用户名、昵称、头像
                        selfuser: (this.selfDefine ? "1" : "0"),
                        username: (this.selfDefine ? this.username : ''),
                        nickname: (this.selfDefine ? this.nickname : ''),
                        avatar: (this.selfDefine ? this.avatar : ''),
                        // 传递商品参数
                        goods: (this.showGoods ? "1" : "0"),
                        goods_id: this.goods_id,
                        goods_title: this.goods_title,
                        goods_content: this.goods_content,
                        goods_price: this.goods_price,
                        goods_url: this.goods_url,
                        goods_imageUrl: this.goods_imageUrl,
                        goods_categoryCode: this.goods_categoryCode,
                        //
                        postscript: this.showPostscript ? this.postscript : ''
                    });
                },

                reinit() {
                    console.log('reinit')
                    //
                    byteDesk.removeDOMElements()
                    this.init()
                },

                onWorkGroupChange(newWid) {
                    console.log('newWid:', newWid)
                    for (let i = 0; i < this.workGroups.length; i++) {
                        const wg = this.workGroups[i];
                        if (wg.wid == newWid) {
                            this.workGroup = this.workGroups[i];
                            console.log('onWorkGroupChange:', this.workGroup)
                        }
                    }
                    let app = this
                    if (app.workGroup.workCode != null && app.workGroup.workCode != undefined) {
                        app.lang = app.workGroup.workCode.lang
                        app.shape = app.workGroup.workCode.shape
                        app.buttonText = app.workGroup.workCode.buttonText
                        app.buttonColor = app.workGroup.workCode.buttonColor
                        app.buttonBackground = app.workGroup.workCode.buttonBackground
                        app.bannerColor = app.workGroup.workCode.bannerColor
                        app.bannerBackground = app.workGroup.workCode.bannerBackground
                        app.position = app.workGroup.workCode.position
                        app.rightMargin = app.workGroup.workCode.rightMargin
                        app.leftMargin = app.workGroup.workCode.leftMargin
                        app.bottomMargin = app.workGroup.workCode.bottomMargin
                        app.positionWindow = app.workGroup.workCode.positionWindow
                        app.column = app.workGroup.workCode.column
                        app.history = app.workGroup.workCode.history
                        app.v2robot = app.workGroup.workCode.v2robot
                    }
                    // TODO: 保存
                    // TODO: 显示新技能组参数
                    // this.getPrechatSettings()
                    //
                    this.reinit()
                },

                getAllAgents() {
                    var app = this
                    $.ajax({
                        url: this.baseUrl + "/visitor/api/agent/all",
                        contentType: "application/json; charset=utf-8",
                        type: "get",
                        data: {
                            uid: this.adminUid,
                            client: 'web'
                        },
                        success: function (response) {
                            console.log("get all agents success:", response);
                            //
                            app.agents = response.data
                            for (let i = 0; i < app.agents.length; i++) {
                                let user = app.agents[i]
                                if (user.robot || user.username === 'bytedesk_notification') {
                                    app.agents.splice(i, 1)
                                }
                            }
                            app.agentUid = app.agents[0].uid
                            // console.log('agentUid:', app.agentUid)
                            app.init()
                        },
                        error: function (error) {
                            console.log("get all agents error:", error);
                        }
                    });
                },

                getAllWorkGroups() {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    //
                    var app = this
                    $.ajax({
                        url: this.baseUrl + "/visitor/api/workGroup/all",
                        contentType: "application/json; charset=utf-8",
                        type: "get",
                        data: {
                            uid: this.adminUid,
                            client: 'web'
                        },
                        success: function (response) {
                            loading.close();
                            console.log("get all workGroup success:", response);
                            // 
                            app.workGroups = response.data
                            app.workGroupWid = app.workGroups[0].wid
                            // console.log('workGroupWid:', app.workGroupWid)
                            if (app.workGroups[0].workCode != null && app.workGroups[0].workCode != undefined) {
                                app.lang = app.workGroups[0].workCode.lang
                                app.shape = app.workGroups[0].workCode.shape
                                app.buttonText = app.workGroups[0].workCode.buttonText
                                app.buttonColor = app.workGroups[0].workCode.buttonColor
                                app.buttonBackground = app.workGroups[0].workCode.buttonBackground
                                app.bannerColor = app.workGroups[0].workCode.bannerColor
                                app.bannerBackground = app.workGroups[0].workCode.bannerBackground
                                app.position = app.workGroups[0].workCode.position
                                app.rightMargin = app.workGroups[0].workCode.rightMargin
                                app.leftMargin = app.workGroups[0].workCode.leftMargin
                                app.bottomMargin = app.workGroups[0].workCode.bottomMargin
                                app.positionWindow = app.workGroups[0].workCode.positionWindow
                                app.column = app.workGroups[0].workCode.column
                                app.history = app.workGroups[0].workCode.history
                                app.v2robot = app.workGroups[0].workCode.v2robot
                            }
                            app.init()
                        },
                        error: function (error) {
                            console.log("get all workGroup error:", error);
                        }
                    });
                },

                getBaseUrl() {
                    if (this.isDebug) {
                        return
                    }
                    let app = this
                    $.ajax({
                        url: this.baseUrl + "/visitor/api/wechatUrl",
                        contentType: "application/json; charset=utf-8",
                        type: "get",
                        data: {
                            client: 'web'
                        },
                        success: function (response) {

                            app.chatUrl = 'https://' + response.data.url
                            // const ip = response.data.ip
                        },
                        error: function (error) {
                            console.log("get all workGroup error:", error);
                        }
                    });
                },

                getShortUrl(url) {
                    // 
                    if (this.workGroupWid === '' || this.agentUid === '') {
                        return
                    }
                    var app = this
                    $.ajax({
                        url: this.baseUrl + "/url/to/short",
                        contentType: "application/json; charset=utf-8",
                        type: "get",
                        data: {
                            url: url,
                            uid: this.adminUid,
                            client: 'web'
                        },
                        success: function (response) {
                            // console.log("get short url success:", response.data);
                            if (app.isDebug) {
                                app.shortCode = app.baseUrl + "/chat/" + response.data
                                // app.shortCode = "http://url.chainsnow.com/chat/" + response.data
                            } else {
                                // app.shortCode = app.chatUrl + "/chat/" + response.data
                                app.shortCode = "http://url.chainsnow.com/chat/" + response.data
                            }
                            //
                            // app.$message({
                            //     message: 'H5短连接生成成功',
                            //     type: 'success'
                            // });
                        },
                        error: function (error) {
                            console.log("get short url error:", error);
                            app.$message.error('H5短连接生成错误');
                        }
                    });
                },

                getPrechatSettings() {
                    // 
                    if (this.workGroupWid === '' || this.type !== 'workGroup') {
                        return
                    }
                    // var app = this
                    // $.ajax({
                    //     url: this.baseUrl + "/visitor/api/prechat/settings",
                    //     contentType: "application/json; charset=utf-8",
                    //     type: "get",
                    //     data: {
                    //         wid: this.workGroupWid,
                    //         client: 'web'
                    //     },
                    //     success: function (response) {
                    //         console.log("getPrechatSettings success:", response);
                    //         let workGroup = response.data
                    //         if (response.status_code === 200 && workGroup.workCode != null) {
                    //             app.lang = workGroup.workCode.lang
                    //             app.shape = workGroup.workCode.shape
                    //             app.buttonText = workGroup.workCode.buttonText
                    //             app.buttonColor = workGroup.workCode.buttonColor
                    //             app.buttonBackground = workGroup.workCode.buttonBackground
                    //             app.bannerColor = workGroup.workCode.bannerColor
                    //             app.bannerBackground = workGroup.workCode.bannerBackground
                    //             app.position = workGroup.workCode.position
                    //             app.rightMargin = workGroup.workCode.rightMargin
                    //             app.leftMargin = workGroup.workCode.leftMargin
                    //             app.bottomMargin = workGroup.workCode.bottomMargin
                    //             app.positionWindow = workGroup.workCode.positionWindow
                    //             app.column = workGroup.workCode.column
                    //             app.history = workGroup.workCode.history
                    //             app.v2robot = workGroup.workCode.v2robot
                    //         }
                    //     },
                    //     error: function (error) {
                    //         console.log("getPrechatSettings error:", error);
                    //     }
                    // });
                },

                // 嵌入式窗口预览
                openWindowEmbed() {
                    // console.log('openWindowEmbed')
                    // 自定义漂浮框，调用此函数打开嵌入式窗口
                    byteDesk.startWithoutIcon()
                },

                hideIcon() {
                    // 隐藏漂浮框
                    byteDesk.hideIcon()
                },

                showIcon() {
                    //
                    byteDesk.showIcon()
                },

                // 客服大窗口预览1
                openWindowBig() {
                    window.open(this.bigWinCode)
                },

                // 客服大窗口预览2
                openWindowBig2() {
                    window.open(this.bigWinCode, "", "height=800, width=800, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
                },

                // 客服小窗口预览1
                openWindowSmall() {
                    window.open(this.smallWinCode)
                },

                // 客服小窗口预览2
                openWindowSmall2() {
                    window.open(this.smallWinCode, "", "height=800, width=800, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
                },

                // h5预览1
                openH5() {
                    window.open(this.h5Code)
                },

                // h5预览2
                openH52() {
                    window.open(this.h5Code, "", "height=500, width=400, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
                },

                // h5视频预览1
                openH5Video() {
                    window.open(this.h5VideoCode)
                },

                // h5视频预览2
                openH5Video2() {
                    window.open(this.h5VideoCode, "", "height=500, width=400, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
                },

                refreshShort() {
                    this.getShortUrl(this.h5Code)
                },
                
                // short预览1
                openShort() {
                    window.open(this.shortCode)
                },

                // short预览2
                openShort2() {
                    window.open(this.shortCode, "", "height=500, width=400, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
                },

                // 复制嵌入式客服代码
                handleOnCodeEmbedCopy() {
                    // console.log('embedcode copy')
                    var clipboard = new ClipboardJS('.copyEmbedBtn')
                    clipboard.on('success', e => {
                        this.$message.success('复制成功')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                    clipboard.on('error', e => {
                        // 不支持复制
                        this.$message.error('该浏览器不支持自动复制')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                },

                // 复制大窗口客服代码
                handleOnCodeBigCopy() {
                    // console.log('codebig copy')
                    var clipboard = new ClipboardJS('.copyBigBtn')
                    clipboard.on('success', e => {
                        this.$message.success('复制成功')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                    clipboard.on('error', e => {
                        // 不支持复制
                        this.$message.error('该浏览器不支持自动复制')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                },

                // 复制小窗口客服代码
                handleOnCodeSmallCopy() {
                    // console.log('codesmall copy')
                    var clipboard = new ClipboardJS('.copySmallBtn')
                    clipboard.on('success', e => {
                        this.$message.success('复制成功')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                    clipboard.on('error', e => {
                        // 不支持复制
                        this.$message.error('该浏览器不支持自动复制')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                },

                // 复制h5客服代码
                handleOnCodeH5Copy() {
                    // console.log('codeh5 copy')
                    var clipboard = new ClipboardJS('.copyH5Btn')
                    clipboard.on('success', e => {
                        this.$message.success('复制成功')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                    clipboard.on('error', e => {
                        // 不支持复制
                        this.$message.error('该浏览器不支持自动复制')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                },

                // 复制视频客服代码
                handleOnCodeH5VideoCopy() {
                    // console.log('codeh5video copy')
                    var clipboard = new ClipboardJS('.copyH5VideoBtn')
                    clipboard.on('success', e => {
                        this.$message.success('复制成功')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                    clipboard.on('error', e => {
                        // 不支持复制
                        this.$message.error('该浏览器不支持自动复制')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                },

                // 复制short客服代码
                handleOnCodeShortCopy() {
                    // console.log('codeh5 copy')
                    var clipboard = new ClipboardJS('.copyShortBtn')
                    clipboard.on('success', e => {
                        this.$message.success('复制成功')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                    clipboard.on('error', e => {
                        // 不支持复制
                        this.$message.error('该浏览器不支持自动复制')
                        // 释放内存
                        // clipboard.destroy()
                        e.clearSelection();
                    })
                },

                switchTestUser (newValue) {
                    // console.log('switchTestUser:' + newValue)
                    if (newValue === 'boy') {
                        this.username = 'mywebuserboy'
                        this.nickname = '我是帅哥web'
                        this.avatar = 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/boy.png'
                    } else {
                        this.username = 'mywebusergirl'
                        this.nickname = '我是美女web'
                        this.avatar = 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/girl.png'
                    }
                    this.reinit()
                },
                
                getUrlParam(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                    var r = window.location.search.substr(1).match(reg); //匹配目标参数
                    if (r != null) return decodeURIComponent(r[2]);
                    return null; //返回参数值
                },

                refreshQrcode() {
                    if (document.getElementById('short_qrcode')) {
                        // 防止生成多张图片
                        document.getElementById('short_qrcode').innerHTML = ''
                    }
                    this.$nextTick(function () {
                        this.qrcode()
                    })
                },
                // 
                qrcode() {
                    new QRCode('short_qrcode', {
                        text: this.shortCode,
                        width: 300,
                        height: 300,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                },
            },
            mounted() {
                //
                this.adminUid = this.getUrlParam('uid')
                this.subDomain = this.getUrlParam('sub')
                // console.log('uid:', this.uid, ' sub:', this.subDomain)
                //
                this.getAllAgents()
                this.getAllWorkGroups()
                this.getBaseUrl()
                // 初始化
                // this.init()
            }
        })
    </script>

    <!-- 反馈对话框开始 -->
    <!-- <script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/jquery/1.9.1/jquery.min.js"></script>
    <script src="./js/feedback.js?1.0"></script>
    <script src="./js/html2canvas.js?1.0"></script>
    <link rel="stylesheet" href="./css/feedback.css?1.0" />
    <script type="text/javascript">
        $.feedback({
            ajaxURL: 'http://127.0.0.1/visitor/api/upload/image',
            html2canvasURL: './js/html2canvas.js',
            onClose: function () {
                window.location.reload();
            }
        });
    </script> -->
    <!-- 反馈对话框结束 -->


</body>

</html>